<template>
    <view class="container">
        <view class="userInfo">
            <image class="headPic" mode="aspectFill" :src="this.userHeadPic"></image>
            <view class="username">{{this.username}}</view>
        </view>
        <uni-section title="提示" type="line" titleFontSize="19px">
            <uni-card>
                <text>
                    收集一些好玩的、好用的、新奇创意的AI网站，欢迎大家合力补充，共同分享。
                    如果你也有喜欢的AI网站想共享出来，可以在插件的评论区发表评论，我会留意并及时补充上来。
                </text>
            </uni-card>
            <uni-card>
                <text>
                    本项目采用uni-app和uniCloud开发。Git项目地址如下，方便大家学习uniCloud及uTool开发。
                    Gitee地址：https://gitee.com/dahuajia/uTool_aiExtra
                </text>
            </uni-card>
        </uni-section>

        <uni-section class="collect" title="我的收藏" type="line" titleFontSize="19px">
            <uni-card class="collectItem" @click="goDetail(item._id)" v-for="item in resourceList" :key="item._id"
                :title="item.title" :sub-title="'收藏时间: ' + item.favoriteTime" :thumbnail="item.headPic || '../../static/images/errPic.jpg'">
                <text class="uni-body">
                    <scroll-view class="label" scroll-x="true" style="height: 1.6rem;">
                        <uni-tag v-for="ele in item.label" :text="ele" circle="true" inverted="true"
                            custom-style="border: 0.13rem solid #8EB97E; margin-right:0.2rem; padding-top:0.2rem;" />
                    </scroll-view>
                </text>
            </uni-card>
        </uni-section>

        <view class="loading" v-if="resourceList.length">
            <view v-if="loading==1">数据加载中...</view>
            <view v-if="loading==2">没有更多了~~</view>
        </view>

    </view>
</template>
<script>
    import {
        getUserInfo
    } from "@/utils/userUtils.js";

    export default {
        data() {
            return {
                resourceList: [],
                currentPage: 1,
                // 0默认  1加载中  2没有更多了
                loading: 0,
                userHeadPic: "../../static/images/errPic.jpg",
                username: "/",
                avatar: 'https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
                userOpenId: "46bdde6b0a337e78c7868bf310159a82",
            }
        },
        // 首次进入时加载
        onLoad() {
            this.getUser();
        },
        // 触底加载更多
        onReachBottom() {
            this.loading = 1;
            this.currentPage++;
            setTimeout(() => {
                this.getUserFavorites();
            }, 500);
        },

        methods: {
            // 获取用户信息
            async getUser() {
                try {
                    let user = await getUserInfo();
                    console.log(user);
                    this.userHeadPic = user.avatar;
                    this.username = user.nickname;
                    this.userOpenId = user.open_id;
                    // 加载用户收藏
                    this.getUserFavorites();
                } catch (err) {
                    console.error(err);
                    uni.showToast({
                        icon: "fail",
                        title: "获取用户信息失败！"
                    });
                }
            },
            // 获取用户收藏信息
            getUserFavorites() {
                console.log(this.userOpenId);
                uniCloud.callFunction({
                    name: "user_favorites_mapper",
                    data: {
                        optType: "getFavRes",
                        param: {
                            currentPage: this.currentPage,
                            userId: this.userOpenId
                        }
                    }
                }).then(res => {
                    console.log(res);
                    this.resourceList = [...this.resourceList, ...res.result];
                    // 底部提示
                    if (this.currentPage != 1 && res.result.length == 0) {
                        this.loading = 2;
                    } else {
                        this.loading = 0;
                    }
                });
            }
        },
    }
</script>

<style lang="scss" scoped>
    .container {
        .userInfo {
            display: flex;
            flex-direction: column;
            align-items: center;

            .headPic {
                width: 6rem;
                height: 6rem;
                margin-top: 0.4rem;
                border-radius: 50%;
            }

            .username {
                margin-top: 0.1rem;
                text-align: center;
                font-size: 1.4rem;
                color: #8bc24c;
                font-weight: bold;
            }
        }

        .loading {
            text-align: center;
            font-size: 1.4rem;
            color: #888;
            line-height: 1.2rem;
            margin: 0.6rem 0;
        }
    }
</style>
